<template>
  <div>
    <el-dialog :title="title" :visible="showDialog" width="30%" @close="close">
      <el-form ref="roleFrom" :model="roleFrom" size="mini" label-width="80px" :rules="rules">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="roleFrom.roleName" />
        </el-form-item>
        <el-form-item label="角色权限" prop="roleKey">
          <el-input v-model="roleFrom.roleKey" />
        </el-form-item>
        <el-form-item label="显示顺序" prop="roleSort">
          <el-input v-model.number="roleFrom.roleSort" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="roleFrom.remark" type="textarea" :rows="4" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" style="margin-right: 200px" @click="close">取 消</el-button>
          <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import { insertRole, updateRole } from '@/api/role'
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      showDialog: {
        type: Boolean,
        default: false
      },
      currentRole: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        roleFrom: {
          roleId: '',
          roleName: '',
          roleKey: '',
          roleSort: null,
          remark: ''
        },
        rules: {
          roleName: [
            { required: true, message: '角色名称不能为空', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          roleKey: [
            { required: true, message: '角色权限不能为空', trigger: 'blur' },
            { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                const isLowerCase = /^[a-z]+$/.test(value.trim())
                if (!isLowerCase) {
                  callback(new Error('必须是全英文小写'))
                } else {
                  callback()
                }
              },
              message: '必须是全英文小写',
              trigger: 'blur'
            }
          ],
          roleSort: [
            { required: true, message: '显示顺序为必填项', trigger: 'blur' },
            { type: 'number', message: '显示顺序必须为数字值' },
            {
              validator: (rule, value, callback) => {
                if (!Number.isInteger(value)) {
                  callback(new Error('显示顺序只能是整数'))
                } else if (value <= 0 || value >= 100) {
                  callback(new Error('显示顺序必须大于0且小于100'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          remark: [{ min: 0, max: 100, message: '长度在 0 到 100 个字符', trigger: 'blur' }]
        }
      }
    },
    watch: {
      // 监听props中传过来的值
      currentRole(newValue) {
        if (newValue) {
          this.roleFrom = {
            roleId: newValue.roleId || '',
            roleName: newValue.roleName || '',
            roleKey: newValue.roleKey || '',
            roleSort: newValue.roleSort || null,
            remark: newValue.remark || ''
          }
        }
      }
    },
    methods: {
      close() {
        // 清空表单
        this.$refs.roleFrom.resetFields()
        // 触发父组件中的.sync默认的事件
        this.$emit('update:showDialog', false)
      },
      async updateRole() {
        await updateRole(this.roleFrom)
        // 清空表单
        this.$refs.roleFrom.resetFields()
        // 触发父组件中的.sync默认的事件
        this.$emit('update:showDialog', false)
        this.$emit('refreshList')
        this.$message.success('修改角色成功')
      },
      async insertRole() {
        await insertRole(this.roleFrom)
        // 清空表单
        this.$refs.roleFrom.resetFields()
        // 触发父组件中的.sync默认的事件
        this.$emit('update:showDialog', false)
        this.$emit('refreshList')
        this.$message.success('新增角色成功')
      },
      /**
       * 提交请求
       */
      submitForm() {
        // 再次校验表单信息
        this.$refs.roleFrom.validate(isOk => {
          if (isOk) {
            if (this.roleFrom.roleId) {
              this.updateRole(this.roleFrom)

              // this.close()
            } else {
              this.insertRole(this.roleFrom)
            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style></style>
